import React, { Component } from 'react';
import Son1 from './Son1'
import Son2 from './Son2'
import './app.scss'
class App extends Component {
    constructor(){
        super()
        this.state={
            num:0
        }
    }
    render() {
        return (
            <div className='app'>
                <div className='box'>
                    <header>
                        <div className='header-left'>
                            <img src="https://www.jq22.com/demo/jqueryxgbdsj202009240833/images/1.png" alt="" />
                            <p>中国加油!武汉加油!</p>
                        </div>
                        <div className='header-right'>
                            <button>全国</button>
                        </div>
                    </header>
                    <main>
                        <div className='mainbox'>
                            <ul className='toptiao'>
                                {
                                    [
                                        '疫情动态',
                                        '山东疫情'
                                    ].map((item,index)=>{
                                        return <li>
                                            <p key={index} onClick={()=>this.setState({num:index})}>
                                                {item}
                                            </p>
                                        </li>
                                    })
                                }
                            </ul>
                            <div className='zhenmain'>
                                {
                                    [
                                        <Son1></Son1>,
                                        <Son2></Son2>
                                    ].map((item, index) => {
                                        return this.state.num === index ? <div key={index}>
                                        {React.cloneElement(item)}
                                    </div> : ''
                                    })
                                }
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        );
    }
}

export default App;